<template>
  <div class="header">
    <div class="inline-block">
      <div class="inline-block haier">
        <a href="#">Haier</a>
      </div>
      <div class="inline-block">
        <div
          v-for="(nav, index) in navs"
          v-mapping:mapping="nav"
          :key="index"
          class="inline-block position-relative nav-display box"
        >
          <span class="inline-block nav-text">{{ nav.label }}</span>
          <template v-if="nav.multi">
            <div class="list position-absolute">
              <div
                v-for="(nav2, index) in nav.children"
                :key="index"
                v-mapping:mapping="nav2"
                class="nav-display"
              >
                <span class="block nav-link" @click="navItemClick(nav2)">{{
                  nav2.label
                }}</span>
                <div class="position-absolute multi">
                  <template v-if="!hasChild(nav2)">
                    <span class="block nav-link">{{ nav2.label }}</span>
                    <a
                      class="inline-block nav-link"
                      v-for="(nav4, index) in nav2.children"
                      v-mapping:mapping="nav4"
                      @click="navItemClick(nav4)"
                      :key="index"
                      >{{ nav4.label }}</a
                    >
                  </template>
                  <template v-else>
                    <div
                      v-for="(nav3, index) in nav2.children"
                      :key="index"
                      v-mapping:mapping="nav3"
                    >
                      <span class="block nav-link">{{ nav3.label }}</span>
                      <a
                        class="inline-block nav-link"
                        v-for="(nav4, index) in nav3.children"
                        @click="navItemClick(nav4)"
                        v-mapping:mapping="nav4"
                        :key="index"
                        >{{ nav4.label }}</a
                      >
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </template>
          <template v-else>
            <div class="list position-absolute">
              <a
                v-for="(item, index) in nav.children"
                @click="navItemClick(item)"
                :key="index"
                v-mapping:mapping="item"
                class="block nav-link"
                >{{ item.label }}</a
              >
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="inline-block">
      <div class="inline-block">
        <el-input placeholder="请输入内容" suffix-icon="el-icon-search">
        </el-input>
      </div>
      <div class="inline-block">
        <el-button
          icon="el-icon-shopping-cart-full"
          circle
          @click="
            route({
              path: '/haier/shoppingcar',
              login: true,
            })
          "
        ></el-button>
      </div>
      <div class="inline-block">
        <el-dropdown>
          <el-button
            icon="el-icon-user"
            circle
            @click="
              route({
                path: '/haier/profile',
                login: true,
              })
            "
          ></el-button>
          <el-dropdown-menu >
            <el-dropdown-item >
              <span @click="logout">退出登陆</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import navs from "@/assets/nav.json";
export default {
  data() {
    return {
      navs: navs,
      mapping: {
        label: "name",
      },
    };
  },
  methods: {
    logout() {
      localStorage.setItem("status", false);
    },
    loadAllTopic() {
      this.$haier
        .get("openapi/list/topic", { cascade: true })
        .then(({ data }) => {
          if (!data || data.length <= 0) return;
          data[0].multi = true;
          this.navs.splice(1, 1, data[0]);
        });
    },
    navItemClick(item) {
      console.log(item);
      var { id, name } = item;
      if (!id) return;
      this.$router.push({
        path: "/haier/commodity",
        query: {
          id: id,
          name: name,
        },
      });
    },
    userProfile() {},
    hasChild(item) {
      return item && item.children[0].children.length > 0;
    },
    route({ path, login }) {
      if (login) {
        this.requireLogin()
          .then(() => {
            this.$router.push({ path: path });
          })
          .catch(() => {
            this.$router.push({ path: "/login" });
          });
      } else {
        this.$router.push({ path: path });
      }
    },
  },
  created() {
    this.loadAllTopic();
  },
};
</script>


<style scoped>
.header {
  position: relative;
  padding: 15px;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}

.haier {
  position: relative;
  top: 2px;
}

.haier a {
  color: #005aaa;
  font-weight: bold;
  font-size: 2em;
  text-decoration: none;
}

.box {
  min-width: 130px;
  text-align: center;
}

.nav-text {
  display: inline-block;
  padding-bottom: 10px;
  font-weight: bold;
}

.nav-link {
  padding: 15px;
  padding-bottom: 5px;
  cursor: pointer;
}

.list {
  background: #f6f6f6;
  text-align: center;
  left: 0px;
  right: 0px;
}

.nav-text:hover,
.nav-display:hover .nav-text {
  color: #005aaa;
}

.nav-text:hover ~ .list,
.nav-display:hover .list {
  padding-bottom: 5px;
  border-top: 5px #005aaa solid;
}

.nav-display .list,
.nav-display .multi {
  display: none;
}

.multi {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 100%;
  background: white;
  padding-left: 20px;
  width: 550px;
  z-index: 99;
}

.multi {
  text-align: left;
}

.multi span {
  padding: 0px;
  padding-top: 10px;
  font-size: 0.8em;
  color: #005aaa;
}

.multi a {
  padding: 0px;
  font-size: 0.9em;
  width: 25%;
  padding-top: 5px;
  padding-bottom: 5px;
}

.nav-display .nav-text:hover ~ .list,
.nav-display .nav-link:hover ~ .multi,
.nav-display .multi:hover,
.nav-display .list:hover {
  display: block;
  z-index: 99;
}

.header > div:last-child > div {
  padding: 10px;
}
</style>